import React, { useEffect, useState } from "react";
import { Card } from "antd";
import Article from "../../api/article/index";
import "./index.less";
const { Meta } = Card;
const ImagesList = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    getImages();
  }, []);
  const getImages = () => {
    Article.imagesList().then(res => {
      if (res.code === 200) {
        setData(res.data);
      }
    });
  };

  return (
    <div
      className="white-bg images"
      style={{ display: "flex", flexWrap: "wrap" }}
    >
      {data.map((item, index) => {
        return (
          <Card
            key={index}
            style={{ width: 300, margin: "10px 10px" }}
            cover={
              <div
                className="images-show"
                style={{
                  backgroundImage:
                    "url(http://118.25.110.93/images/" + item.file_name + ")"
                }}
              ></div>
            }
          >
            <Meta
              title={"名称:" + item.file_name}
              description={"大小:" + item.size}
            />
          </Card>
        );
      })}
    </div>
  );
};
export default ImagesList;
